<div class="container">
  <div class="header-button">
    <mat-form-field appearance="outline">
      <mat-label>输入日期范围</mat-label>
      <mat-date-range-input [formGroup]="backupFG" [rangePicker]="picker">
        <input formControlName="start" matStartDate placeholder="开始日期">
        <input formControlName="end" matEndDate placeholder="结束日期">
      </mat-date-range-input>
      <mat-datepicker-toggle [for]="picker" matIconSuffix></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>

      @if (backupFG.controls.start.hasError('matStartDateInvalid')) {
        <mat-error>Invalid start date</mat-error>
      }
      @if (backupFG.controls.end.hasError('matEndDateInvalid')) {
        <mat-error>Invalid end date</mat-error>
      }
    </mat-form-field>
    <button (click)="filterDate(backupFG.value.start, backupFG.value.end)" mat-stroked-button>
      查询
    </button>
    <button (click)="listDBBackup(this.currentDate, this.currentDate)" mat-stroked-button>
      今日
    </button>
  </div>
  <table [dataSource]="dataSource" mat-table matSort>

    <!--日期-->
    <ng-container matColumnDef="day">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>日期</th>
      <td *matCellDef="let element" mat-cell>{{ element.day }}</td>
    </ng-container>
    <!--地址-->
    <ng-container matColumnDef="address">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>地址</th>
      <td *matCellDef="let element" mat-cell>{{ element.address }}</td>
    </ng-container>
    <!--端口-->
    <ng-container matColumnDef="port">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>端口</th>
      <td *matCellDef="let element" mat-cell>{{ element.port }}</td>
    </ng-container>
    <!--备份类型-->
    <ng-container matColumnDef="bak_type">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>备份类型</th>
      <td *matCellDef="let element" mat-cell>{{ element.bak_type }}</td>
    </ng-container>
    <!--备份文件-->
    <ng-container matColumnDef="bak_file">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>备份文件</th>
      <td *matCellDef="let element" mat-cell>{{ element.bak_file }}</td>
    </ng-container>
    <!--备份大小-->
    <ng-container matColumnDef="bak_size">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>备份大小</th>
      <td *matCellDef="let element" mat-cell>{{ element.bak_size }}</td>
    </ng-container>
    <!--开始时间-->
    <ng-container matColumnDef="start_time">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>开始时间</th>
      <td *matCellDef="let element" mat-cell>{{ element.start_time }}</td>
    </ng-container>
    <!--结束时间-->
    <ng-container matColumnDef="end_time">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>结束时间</th>
      <td *matCellDef="let element" mat-cell>{{ element.end_time }}</td>
    </ng-container>
    <!--备份状态-->
    <ng-container matColumnDef="status">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>备份状态</th>
      <td *matCellDef="let element" mat-cell>{{ element.status }}</td>
    </ng-container>
    <!--创建日期-->
    <ng-container matColumnDef="create_at">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>创建日期</th>
      <td *matCellDef="let element" mat-cell>{{ element.create_at }}</td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
</div>
